<template>
    <div style="height: 100%">
        <!--                                            饿了么-->
        <template>
            <div class="block">
                <el-carousel trigger="click"  arrow="always">
                    <el-carousel-item v-for="(item,index) in swiperList" :key="index" >
                        <div @click="go(index)">
                        <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.backgroundRotaryBroadcasting}`"
                             alt="">
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </template>
    </div>
</template>

<script>
    import {getProductList} from "../../../api";

    export default {
        name: "one",
        data() {
            return {
                swiperList: [],//图片轮播数组
            }
        },
        methods: {
            go(i){
                if(i!=0){
                    window.open(this.swiperList[i].jumpwebsite)
                }
            }
        },
        created() {
            getProductList().then(res => {
                this.swiperList = res.rows
            })
        }
    }
</script>

<style scoped lang="less">
    .block {
        width: 100%;
    }

    img {
        width: 100%;
        height: 100%;
    }

    /deep/ .el-carousel__indicators--horizontal {
        bottom: 5%;
    }

    /deep/ .el-carousel__button {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin: 0 10px;
    }
    /deep/.el-carousel__arrow {
        font-size: 50px;
        font-weight: bolder;
        background-color: transparent;
    }
    /deep/.el-carousel__arrow:hover{
        background-color: transparent;
    }
    /deep/.el-carousel__arrow--left {
            left: 100px;
    }
    /deep/.el-carousel__arrow--right {
        right: 100px;
    }

    /deep/ .el-carousel__item {
        height: 100%;
    }

    /deep/ .el-carousel__container {
        height: 100%;

    }

    /deep/ .el-carousel {
        height: 100%;

    }

    /deep/ .block {
        height: 100%;
    }

</style>